<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="http://tp6.com/static/plugins/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Font Awesome -->
<link rel="stylesheet" href="http://tp6.com/static/plugins/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css">

<!-- bootstrap-table 表格插件样式 -->
<link href="bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
    <style>
        li {
            list-style: none;
        }
        .search-collapse,.select-table {
            width: 100%;
            background: #fff;
            border-radius: 6px;
            margin-top: 10px;
            padding-top: 5px;
            padding-bottom: 13px;
            box-shadow: 1px 1px 3px rgba(0,0,0,.2);
        }

        .search-collapse {
            position: relative;
        }

        .search-collapse .col-sm-6 .control-label {
            color: #333;
        }

        @media ( max-width : 768px) {
            .search-collapse {
                display: none;
            }
        }

        @media ( min-width : 768px) {
            .select-list li {
                float: left;
            }
        }

        .select-list li {
            color: #333;
            margin: 5px 15px 5px 0px;
        }

        .select-list li p{
            float: left;
            width: 80px;
            margin: 5px 15px 5px 0px;
            text-align:right;
        }

        .select-list li input {
            border: 1px solid #ddd;
            border-radius: 4px;
            background: transparent;
            outline: none;
            height: 30px;
            width: 200px;
            padding-left: 5px;
        }

        .select-list li .submit-btn {
            border: 0px;
            border-radius: 4px;
            background: transparent;
            outline: none;
            width: 40px;
            height: 23px;
        }

        .select-list li select {
            border: 1px solid #ddd;
            border-radius: 4px;
            background: transparent;
            outline: none;
            height: 30px;
            width: 200px;
        }

    </style>
</head>
<body>



<script src="http://tp6.com/static/plugins/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<script src="http://tp6.com/static/plugins/AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- bootstrap-table 表格插件 -->
<script src="bootstrap-table/bootstrap-table.min.js"></script>
<script src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
<script src="bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
<link href="bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css" rel="stylesheet"/>
<script src="bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>

<!-- jquery-export 表格导出插件 -->
<script src="bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
<script src="bootstrap-table/extensions/export/tableExport.js"></script>


<script src="siyu-ui.js"></script>


<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="logininfor-form">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>登录地址：</label><input type="text" name="ipaddr"/>
                        </li>
                        <li>
                            <label>登录名称：</label><input type="text" name="loginName"/>
                        </li>
                        <li>
                            <label>登录状态：</label><select name="status">
                            <option value="">所有</option>
                            <option value="0">成功</option>
                            <option value="1">失败</option>
                        </select>
                        </li>

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchPre()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="resetPre()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>



        <div class="col-sm-12 select-table table-striped"><div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" href="data.html">
                <i class="fa fa-plus"></i> 新增
            </a>
            <a class="btn btn-primary single disabled" onclick="$.operate.edit()">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<script>

    $(function() {
        var options = {
            url: "data.html",             // 请求后台的URL
            sortName: "id",               // 排序列名称
            sortOrder: "desc",            // 排序方式  asc 或者 desc
            modalName: "操作日志",
            columns: [
                {
                    field: 'state',
                    checkbox: true
                },
                {
                    field: 'infoId',
                    title: '访问编号',
                    sortable: true
                },
                {
                    field: 'loginName',
                    title: '登录名称',
                    sortable: true
                },
                {
                    field: 'ipaddr',
                    title: '登录地址'
                },
                {
                    field: 'loginLocation',
                    title: '登录地点'
                },
                {
                    field: 'browser',
                    title: '浏览器'
                },
                {
                    field: 'os',
                    title: '操作系统'
                },
                {
                    field: 'status',
                    title: '登录状态',
                    align: 'center',
                    formatter: function(value, row, index) {
                        if (value == 0) {
                            return '<span class="badge badge-primary">成功</span>';
                        } else if (value == 1) {
                            return '<span class="badge badge-danger">失败</span>';
                        }
                    }
                },
                {
                    field: 'msg',
                    title: '操作信息'
                },
                {
                    field: 'loginTime',
                    title: '登录时间',
                    sortable: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.infoId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.infoId + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }

            ]
        };
        $.table.init(options);
    });

    // 搜索
    function searchPre() {
        var data = {};
        $.table.search('', data);
    }

    // 重置搜索元素
    function resetPre() {
        $.form.reset();
    }
</script>


</body>
</html>
